<template>
  <div class="timeStep" ref="timeRef"></div>
</template>
<script setup>
import { ref } from "vue";
import '@kitware/vtk.js/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/Geometry';
import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkHttpDataSetReader from '@kitware/vtk.js/IO/Core/HttpDataSetReader';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkScalarBarActor from '@kitware/vtk.js/Rendering/Core/ScalarBarActor';
// Force the loading of HttpDataAccessHelper to support gzip decompression
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';



// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

renderer.getActiveCamera().setPosition(0, 15, 10);
renderer.getActiveCamera().setFocalPoint(0, 0, 0);

// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------
// Server is not sending the .gz and with the compress header
// Need to fetch the true file name and uncompress it locally
// ----------------------------------------------------------------------------

const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
reader.setUrl("/demo.vtu").then((e) => {
  console.log("e", e);
  reader.loadData().then(() => {
    renderer.resetCamera();
    renderWindow.render();
    update();
  });
});


const { ColorMode, ScalarMode } = vtkMapper;
const lookupTable = vtkLookupTable.newInstance();

// 设置从蓝色到红色的颜色映射
lookupTable.setHueRange(0.666, 0); // 蓝色到红色
lookupTable.setSaturationRange(1, 1);
lookupTable.setValueRange(1, 1);
lookupTable.setAlphaRange(1, 1);
lookupTable.setNumberOfColors(256);
lookupTable.build();

const scalarBarActor = vtkScalarBarActor.newInstance();

scalarBarActor.setAxisLabel("T");
scalarBarActor.setDrawNanAnnotation(false);
renderer.addActor(scalarBarActor);

const mapper = vtkMapper.newInstance({
  interpolateScalarsBeforeMapping: true,
  colorMode: ColorMode.MAP_SCALARS,
  scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
  useLookupTableScalarRange: true,
  lookupTable,
});
mapper.setInputConnection(reader.getOutputPort());
mapper.setColorByArrayName('T'); // 使用T字段（温度）

const actor = vtkActor.newInstance();
actor.setMapper(mapper);
// actor.getProperty().setEdgeVisibility(true);

renderer.addActor(actor);

function update() {
  const pointData = reader.getOutputData().getPointData();
  const temperatureArray = pointData.getArrayByName("T");

  if (temperatureArray) {
    // 获取数据范围（最小值和最大值）
    const range = temperatureArray.getRange();
    const min = range[0];
    const max = range[1];

    console.log("Temperature range:", min, "to", max);

    // 正确设置颜色映射的数据范围
    lookupTable.setRange(min, max);

    // 更新标量条

    scalarBarActor.setScalarsToColors(lookupTable);

    // 重新渲染
    renderWindow.render();
  }

  console.log("numLayers", temperatureArray);
}

// -----------------------------------------------------------
// Make some variables global so that you can inspect and
// modify objects in your browser's developer console:
// -----------------------------------------------------------
let global = {}
global.source = reader;
global.mapper = mapper;
global.actor = actor;
global.renderer = renderer;
global.renderWindow = renderWindow;
</script>
<style scoped>
.timeStep {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  z-index: 100;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  font-family: monospace;
}
</style>